<template>
  <NewCard title="需求" :isright="true">
    <template slot="right">
        <el-button type="text" class="handleBtn" @click="clickEdit">操作</el-button>
    </template>

    <!-- 需求 -->
    <div class="conditionsTxt">
        <h3>
          <p>需求名称</p>
          <p>类型</p>
          <p>说明</p>
        </h3>
        <ul>
          <li v-for="(item, index) in tableList" :key="index">
              <p>{{item.name}}</p>
              <!-- 1填写，2选择 -->
              <p>{{item.type=='1'?'填写':'选择'}}</p>
              <p>
                <el-tooltip class="item" effect="dark" :content="item.description" placement="top-start">
                    <span>{{item.description}}</span>
                </el-tooltip>
              </p>
          </li>
        </ul>
    </div>

    <!-- 编辑需求抽屉  -->
    <el-drawer
        title="编辑需求"
        size="40%"
        @close="drawerClose"
        :visible.sync="editDrawer">
        <div class="edit-box">
            <h3>
                <p>删除</p>
                <p>需求名称</p>
                <p>类型</p>
                <p>说明</p>
                <p>选项列表</p>
            </h3>
            <div class="edit-list" v-for="(item, index) in tableList" :key="index">
                <i class="el-icon-remove" @click="removeBtn(item)" v-hasPermi="['tool:loanNeeds:remove']"></i>
                <el-input v-model="item.name" placeholder="需求名称" @blur="blurInput(item)" @input="addInputValue(item)"></el-input>
                <el-select v-model="item.type" placeholder="类型" @change="addInputValue(item)">
                    <!-- 1填写，2选择 -->
                    <el-option label="填写" value="1"></el-option>
                    <el-option label="选择" value="2"></el-option>
                </el-select>
                <el-input v-model="item.description" placeholder="说明" @blur="blurInput(item)" @input="addInputValue(item)"></el-input>
                <el-input v-model="item.chooseList" v-if="item.type == '2'" placeholder="英文逗号分隔" @blur="blurInput(item)" @input="addInputValue(item)"></el-input>
            </div>
            <!-- 添加图标 -->
            <p class="drawerAdd">
                <svg-icon icon-class="add-icon" @click="addList" v-hasPermi="['tool:loanNeeds:add']"/>
            </p>
        </div>
        <SubBtn v-if="addBtnState">
            <template slot="btn">
                <el-button round @click="cancelBtn">取消</el-button>
                <el-button type="primary" round @click="saveBtn">保存</el-button>
            </template>
        </SubBtn>
    </el-drawer>
  </NewCard>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
import SubBtn from "@/wss/components/subBtn.vue";

import {getLoanNeedsListApi,getLoanNeedsAddApi,getLoanNeedsEditApi,getLoanNeedsRemoveApi} from "@/wss/newApi_3-24/tool/loanNeeds.js"
import debounce from "lodash/debounce";
export default {
  components:{
    NewCard,
    SubBtn,
  },
  data(){
    return{
      // 需求列表
      tableList:[],
      bottomBtnShow:true,//底部按钮
      bottomBtnValue:'',//底部输入值

      addBtnState: false,// 添加取消的按钮
      
      editBtnState: false,// 标识是否为保存按钮的状态
      editDrawer: false,//编辑材料的状态
      drawerState:false,//当前 材料抽屉的状态
      temTableList:[],//暂存的数据
    }
  },
  mounted(){
    this.getLoanNeedsList() // 获取贷款需求列表
  },
  methods:{
    // 获取贷款需求列表
    async getLoanNeedsList(){
      let result = await getLoanNeedsListApi()
      if(result.code==200){
        this.tableList = result.rows
      }
    },

    // 点击添加一条数据
    addList(){
      // 如果之前的一条没点保存不给添加新的一条
      if(this.addBtnState) {
        this.$message({message: '请保存！',type: 'warning'});
        return
      }

      // this.addBtnState = true //添加取消的按钮
      this.tableList.push({
        name:'',//需求名称
        type:'1',//类型，1填写，2选择
        description:'',//说明
      })
    },

    // 点击取消按钮
    cancelBtn(){
      // 删掉最后一条
      this.tableList.splice(this.tableList.length-1,1)
      this.addBtnState = false //隐藏按钮
    },

    // 保存的按钮
    async saveBtn(){
      let item = this.tableList[this.tableList.length-1]
      if(item.name == '' || item.description == ''){
        this.$message.error("请填写完整");
      }else{
        if(item.type == '2' && !item.chooseList){
          this.$message({message: '请填写选项列表',type: 'warning'});
        }else{
          await this.getLoanNeedsAdd(item) // 添加的接口
          this.getLoanNeedsList() // 获取贷款需求列表
          this.addBtnState = false //隐藏按钮
        }
      }
    },

    // 添加的接口
    async getLoanNeedsAdd(item){
      let result = await getLoanNeedsAddApi(item)
      if(result.code == 200){
        this.$message({message: '编辑成功',type: 'success'});
      }
    },

    // 输入框失去焦点的时候
    async blurInput(item){
      if(item.id){
        
      }
    },

    // 输入完成之后添加
    addInputValue: debounce(async function(item){
      if(!item.id){
        // 添加的判断填写完整的话才保存
        if(item.name != '' && item.description != ''){
          if(item.type == '2' && !item.chooseList){
            this.$message({message: '请填写选项列表',type: 'warning'});
          }else{
            await this.getLoanNeedsAdd(item) // 添加的接口
            this.getLoanNeedsList() // 获取贷款需求列表
            this.addBtnState = false //隐藏按钮
          }
        }
      }else{
        // 编辑的
        if(item.name == '' || item.description == ''){
          this.$message.error("请填写完整");
        }else{
          if(item.type == '2' && !item.chooseList){
            this.$message({message: '请填写选项列表',type: 'warning'});
          }else{
            await this.getLoanNeedsEdit(item) // 添加的接口
            this.getLoanNeedsList() // 获取贷款需求列表
          }
        }
      }
    },500),

    // 修改的接口
    async getLoanNeedsEdit(item){
      let result = await getLoanNeedsEditApi(item)
      if(result.code == 200){
        this.$message({message: '编辑成功',type: 'success'});
      }
    },

    // 点击删除的按钮
    async removeBtn(item){
      if(item.id){
        await this.getLoanNeedsRemove(item.id)
        this.getLoanNeedsList() // 获取贷款需求列表
      }else{
        // 获得下标
        let index = this.tableList.indexOf(item);
        // 根据下标去删数据
        this.tableList.splice(index,1)
        this.addBtnState = false //关闭取消和保存按钮
      }
    },

    // 删除的接口
    async getLoanNeedsRemove(id){
      let result = await getLoanNeedsRemoveApi(id)
      if(result.code == 200){
        this.$message({message: '删除成功',type: 'success'});
      }
    },

    // 关闭抽屉的回调
    drawerClose(){
      this.getLoanNeedsList() // 获取贷款需求列表
      this.addBtnState = false //隐藏按钮
    },

    //点击操作按钮
    clickEdit(){
        this.editDrawer = true //显示编辑材料
    },
  },
}
</script>

<style scoped>
ul,h3,h4,p {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pd20 {
  padding: 0 20px;
}
.mb60 {
  margin-bottom: 60px;
}
::v-deep .el-card{
  position: relative;
}
::v-deep .el-card__body {
  height: 100%;
  padding: 0;
}
::v-deep .el-card__body .top{
  margin: 0 30px;
}
::v-deep .el-card__body > div {
  height: calc(100% - 45px);
  overflow-y: auto;
}
::v-deep .el-card__body > div::-webkit-scrollbar {
  width: 0;
}
/* 操作按钮 */
.handleBtn {
  color: #f87a23;
  font-size: 12px;
}

/* 供应机构 */
.conditionsTxt h3 {
  display: flex;
  font-size: 12px;
  font-weight: 600;
  color: #909aaa;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 15px;
  margin: 0 30px;
  margin-top: 10px;
}
.conditionsTxt h3 > p:first-child {
  width: 30%;
}
.conditionsTxt h3 > p:nth-child(2) {
  width: 20%;
}
.conditionsTxt h3 > p:nth-child(3) {
  width: 50%;
}

.conditionsTxt ul>li{
  display: flex;
  font-size: 14px;
  font-weight: 400;
  color: #2E3F5E;
  padding: 0 30px;
}
.conditionsTxt ul>li:hover{
  background-color: #F5F7FA;
}
.conditionsTxt ul>li>p{
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow:ellipsis;
  padding: 15px 0;
  border-bottom: 1px solid #F5F7FA;
}
.conditionsTxt ul>li>p:first-child{
  width: 30%;
}
.conditionsTxt ul>li>p:nth-child(2) {
  width: 20%;
}
.conditionsTxt ul>li>p:nth-child(3) {
  width: 50%;
}

/* 编辑项目抽屉样式 */
::v-deep .el-drawer__header{
    border-bottom: 1px solid #EFEFEF;
    padding-bottom: 15px;
    margin-bottom: 20px;
}
::v-deep .el-drawer__header>span{
    font-size: 18px;
    font-weight: bold;
    color: #2E3F5E;
    padding-left: 20px;
    background: url('~@/wss/assets/image/icon/cardLeft.png') left center no-repeat;
    background-size: 7px;
}

/* 抽屉 */
.edit-box{
    padding: 0 20px;
    margin-bottom: 60px;
}
.edit-box h3{
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  font-weight: 600;
  color: #909AAA;
  border-bottom: 1px solid #EBEEF5;
  padding-bottom: 15px;
}
.edit-box h3>p:first-child{
  width: 12%;
}
.edit-box h3>p:nth-child(2){
  width: 19%;
}
.edit-box h3>p:nth-child(3){
  width: 15%;
}
.edit-box h3>p:nth-child(4){
  width: 27%;
}
.edit-box h3>p:nth-child(5){
  flex: 1;
}

.edit-list{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #EBEEF5;
}
.edit-list i{
    width: 8%;
    color: #909aaa;
    cursor: pointer;
}
.edit-list .el-input:nth-child(2){
    width: 20%;
}
.edit-list .el-select:nth-child(3){
    width: 15%;
}
.edit-list .el-select:nth-child(3) >>> .el-input__suffix{
  display: none;
}
.edit-list .el-input:nth-child(4),
.edit-list .el-input:nth-child(5){
    flex: 1;
    margin-left: auto;
}
::v-deep .edit-list .el-input .el-input__inner{
  border: 0;
}

.drawerAdd{
    width: 100%;
    padding: 12px 0;
    border-bottom: 1px solid #f5f7fa;
}
.drawerAdd svg{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #909aaa;
    margin-left: 10%;
    cursor: pointer;
}

/* 添加按钮 */
.bottomBtn{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #F8F8F8;
  border-top: 1px solid #ECEDF0;
  z-index: 99;
}
.bottomBtn>.el-button{
  width: 100%;
  border: 0;
  background-color: #F8F8F8;
  line-height: 25px;
  color: #606E84;
}

.addAss-box{
  padding: 6px 30px;
}
::v-deep .bottomBtn .el-input .el-input__inner{
  height: 36px;
  line-height: 36px;
}
.addAss-btn{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.addAss-btn .el-input:nth-child(1){
  width: 25%;
}
.addAss-btn .el-input:nth-child(2){
  width: 35%;
}
.addAss-btn .el-button{
  height: 34px;
  padding: 0 20px;
  margin-left: 0;
  border-radius: 30px;
}
.addAss-btn .el-button.el-button--primary{
  background-color: #F87A23;
  border-color: #F87A23;
}

/* 右侧按钮样式 */
::v-deep .subBtn{
  padding: 8px 30px!important;
  z-index: 99;
}
::v-deep .subBtn>.el-button{
  width: 100px;
  padding: 8px 0!important;
  font-size: 14px;
  color: #606E84;
}
.subBtn>.el-button >>> span,
.subBtn>.el-button >>> span>a{
    display: block;
}
::v-deep .subBtn>.el-button.el-button--primary{
  background-color: #F87A23;
  border-color: #F87A23;
  color: #fff;
}
</style>